<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/main_nav.css">
  <link rel="stylesheet" href="./css/main_banner-ad.css">
  <link rel="stylesheet" href="./css/main_sub-ad.css">
  <link rel="stylesheet" href="./css/main_intro.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
  <!-- 头部 开始-->
  <header class="header">
    <div class="inner-center header-center">
      <!-- header左侧 开始 -->
      <div class="header-left">
        <ul class="nav">
          <li><a href="javascript:;">魅族官网</a></li>
          <li><a href="javascript:;">魅族商城</a></li>
          <li><a href="javascript:;">Flyme</a></li>
          <li><a href="javascript:;">专卖店</a></li>
          <li><a href="javascript:;">服务</a></li>
          <li><a href="javascript:;">社区</a></li>
        </ul>
      </div>
      <!-- header左侧 结束 -->
      <!-- header右侧 开始 -->
      <div class="header-right">
        <ul class="tools">
          <li><a href="javascript:;">我的收藏<span class="new display">new</span></a></li>
          <li><a href="javascript:;">我的订单</a></li>
          <li><a href="javascript:;">登录</a></li>
          <li><a href="javascript:;">注册</a></li>
        </ul>
      </div>
      <!-- header右侧 结束 -->
    </div>
  </header>
  <!-- 头部 结束 -->

  <!-- 主部 开始 -->
  <main>
    <!-- 主导航 开始 -->
    <nav class="main-nav clearfix">
      <div class="inner-center main-nav-center">
        <span class="logo">魅族</span>
        <ul class="nav">
          <li><a href="javascript:;">PRO手机</a></li>
          <li><a href="javascript:;">魅蓝手机</a></li>
          <li><a href="javascript:;">MX手机</a></li>
          <li><a href="javascript:;">精选配件</a></li>
          <li><a href="javascript:;">智能硬件</a></li>
        </ul>
      </div>
    </nav>
    <!-- 主导航 结束 -->

    <!-- 横幅轮播广告区域 开始 -->
    <section class="banner-ad">
      <!-- 横幅轮播图 -->
      <div class="carousel">
        <ol>
          <li>
            <a href="javascript:;">
              <img src="./images/banner.jpg" alt="">
            </a>
          </li>
        </ol>
      </div>
      <!-- 其他组件 -->
      <div class="inner-center banner-ad-center">
        <!-- 横幅导航 -->
        <ul class="banner-menu">
          <li>
            <div>全部商品分类</div>
          </li>
          <li>
            <div>手机</div>
          </li>
          <li>
            <div>智能硬件</div>
          </li>
          <li>
            <div>耳机&nbsp;/&nbsp;音箱</div>
          </li>
          <li>
            <div>路由器&nbsp;/&nbsp;移动电源</div>
          </li>
          <li>
            <div>保护套&nbsp;/&nbsp;后盖&nbsp;/&nbsp;贴膜</div>
          </li>
          <li>
            <div>数据线&nbsp;/&nbsp;电源配置器</div>
          </li>
          <li>
            <div>周边配件</div>
          </li>
        </ul>
        <!-- 圆点操作按钮 -->
        <ol class="btn-circles">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
        <!-- 左右按钮 -->
        <div class="btns">
          <a class="btn btn-left"></a>
          <a class="btn btn-right"></a>
        </div>
      </div>
    </section>
    <!-- 横幅轮播广告区域 结束 -->

    <!-- 次位广告区域 开始 -->
    <section class="sub-ad">
      <div class="inner-center">
        <ul>
          <li>
            <div class="grt">
              <img src="./images/1450855246-61162.png" alt="">
              <p>M码通道</p>
            </div>
            <div class="grt">
              <img src="./images/1450855279-64872.png" alt="">
              <p>以旧换新</p>
            </div>
            <div class="grt">
              <img src="./images/1450855198-58056.png" alt="">
              <p>魅族意外保</p>
            </div>
            <div class="grt">
              <img src="./images/1451960447-93534.png" alt="">
              <p>回购单查询</p>
            </div>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/1469442560-64371.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/Cix_s1fuEgmAc5NwAABEl576SHY123.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/Cix_s1f66-eAGausAABXAszHWuE990.png" alt="">
            </a>
          </li>
        </ul>
      </div>

    </section>
    <!-- 次位广告区域 结束 -->

    <!-- 产品介绍区域 开始 -->
    <section class="intro clearfix">
      <div class="inner-center">
        <div class="title">
          <div class="left">手机</div>
          <div class="right">
            <a href="javascript:;">
              <span>更多</span>
              <em class="arrow">
                <b></b>
                <i></i>
              </em>
            </a>
          </div>
        </div>
        <ul class="products">
          <li class="phone hot">
            <img src="./images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="魅蓝 note3">
            <p class="name">魅蓝 note3</p>
            <p class="descript">11日-12日 限量开售</p>
            <p class="price"><span class="unit">￥</span>799</p>
          </li>
          <li class="phone">
            <img src="./images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" alt="魅蓝 3">
            <p class="name">魅蓝 3</p>
            <p class="descript">11日-12日 公开版限量开售</p>
            <p class="price"><span class="unit">￥</span>599</p>
          </li>
          <li class="phone hot">
            <img src="./images/Cix_s1f6EZaAMxvjAA2l_exLROk326_180x180.png" alt="魅蓝 3s">
            <p class="name">魅蓝 3s</p>
            <p class="descript">11日-12日 限量开售</p>
            <p class="price"><span class="unit">￥</span>699</p>
          </li>
          <li class="phone reduce">
            <img src="./images/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png" alt="魅蓝 metal">
            <p class="name">魅蓝 metal</p>
            <p class="descript">领券立减100元</p>
            <p class="price"><span class="unit">￥</span>999</p>
          </li>
          <li class="phone hot">
            <img src="./images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt="魅蓝 E">
            <p class="name">魅蓝 E</p>
            <p class="descript">全网通 多彩金属机身</p>
            <p class="price"><span class="unit">￥</span>1299</p>
          </li>
        </ul>
      </div>
    </section>
    <!-- 产品介绍区域 结束 -->
  </main>
  <!-- 主部 结束 -->

  <!-- 底部 开始 -->
  <footer class="footer">
    <div class="inner-center">
      <!-- 副信息 -->
      <ul>
        <li>
          <dl>
            <dt>帮助说明</dt>
            <dd><a href="javascript:;">支付方式</a></dd>
            <dd><a href="javascript:;">配送说明</a></dd>
            <dd><a href="javascript:;">售后服务</a></dd>
            <dd><a href="javascript:;">付款帮助</a></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>Flyme</dt>
            <dd><a href="javascript:;">开放平台</a></dd>
            <dd><a href="javascript:;">固件下载</a></dd>
            <dd><a href="javascript:;">软件商店</a></dd>
            <dd><a href="javascript:;">查找手机</a></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>关于我们</dt>
            <dd><a href="javascript:;">关于魅族</a></dd>
            <dd><a href="javascript:;">加入我们</a></dd>
            <dd><a href="javascript:;">联系我们</a></dd>
            <dd><a href="javascript:;">法律声明</a></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>关注我们</dt>
            <dd><a href="javascript:;">新浪微博</a></dd>
            <dd><a href="javascript:;">腾讯微博</a></dd>
            <dd><a href="javascript:;">QQ空间</a></dd>
            <dd><a href="javascript:;">官方微信</a></dd>
          </dl>
        </li>
        <li>
          <p>24小时全国服务热线</p>
          <p class="tel">400-788-3333</p>
          <a class="ol-talk" href="JavaScript:;"><i></i> 24小时在线客服</a>
        </li>
      </ul>
      <div class="hr"></div>
      <!-- 网站声明 -->
      <div class="spec">
        &copy;2016 Meizu Telecom Equipment Co., Ltd. All rights
        reserved.&nbsp;&nbsp;备案号&nbsp;:&nbsp;粤ICP备13003602号-2&nbsp;&nbsp;经营许可证编号&nbsp;:&nbsp;粤B2-20130198&nbsp;&nbsp;营业执照&nbsp;&nbsp;<img
          src="./images/footer-copy-1.png" alt="">&nbsp;&nbsp;&nbsp;<img src="./images/footer-copy-2.png"
          alt="">&nbsp;&nbsp;&nbsp;<img src="./images/trust-icon.png" alt="">
      </div>
    </div>
  </footer>
  <!-- 尾部 结束 -->

</body>

</html>
